<template>
    <div class="login-body">
        <div class="login-container">
            <div class="head">
                <img class="logo" src="https://s.weituibao.com/1582958061265/mlogo.png" alt="">
                <div class="name">
                    <div class="title">新峰商城</div>
                    <div class="tips">Vue3.0后台管理里系统/</div>
                </div>
            </div>
            <el-form label-position="top" :rules="state.rules" :model="state.ruleForm" ref="loginForm" class="login-form">
                <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model.trim="state.ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model.trim="state.ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <div style="color: #333">登录表示您已同意<a>《服务条款》</a></div>
                    <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
                    <el-checkbox v-model="checked" @change="!checked">下次自动登录</el-checkbox>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/axios'
import md5 from 'js-md5'
import { reactive, ref} from 'vue'
import { localSet } from '@/utils'

// el-form 组件接收一个 ref 属性，Vue3 需要这样声明
const loginForm = ref(null)
const state = reactive({
  ruleForm: {
    username: '', 
    password: '',
  },
  checked: true,
  // 表单验证判断。
  rules: {
    username: [
      { required: 'true', message: '账户不能为空', trigger: 'blur' }
    ],
    password: [
      { required: 'true', message: '密码不能为空', trigger: 'blur' }
    ]
  }
})
// 表单提交方法
const submitForm = async () => {
  loginForm.value.validate((valid) => {
    // valid 是一个布尔值，表示表单是否通过了上面 rules 的规则。
    if (valid) {
      axios.post('/adminUser/login', {
        userName: state.ruleForm.username || '',
        passwordMd5: md5(state.ruleForm.password), 
      }).then(res => {
        localSet('token', res)
        window.location.href = '/'
      })
    } else {
      console.log('error submit!!')
      return false;
    }
  })
}
// 重制方法
const resetForm = () => {
  // loginForm能拿到 el-form 的重制方法
  loginForm.value.resetFields();
}



</script>

<style scoped>
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login-container {
    width: 420px;
    height: 500px;
    box-shadow: 20px 20px 20px 10px rgb(233, 170, 179);
}

.head {
    display: flex;
    justify-content: center;
    /* margin-left: 50%;
    transform: translateX(-50%); */
}

.logo {
    width: 120px;
    margin-top: 55px;
    margin-left: 70px;
}

.name {
    width: 200px;
    margin-top: 80px;
    margin-left: 20px;
}

.title {
    width: 120px;
    font-size: 30px;
    color: #0072dd;
}

.tips {
    width: 125px;
    font-size: 10px;
}

.login-form {
    width: 70%;
    margin: 0 auto;
}

.login-form>>>.el-form--label-top .el-form-item__label {
    padding: 0;
}

.login-form>>>.el-form-item {
    margin-bottom: 0;
}
</style>